<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		
	</head>
	<body>
		<button>按钮</button>
		<div>
			<span>鼠标移动变化</span>
		</div>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, quod ipsum iste perspiciatis deserunt enim non quisquam omnis in quia itaque, eum consequuntur temporibus quos, cupiditate consectetur reiciendis culpa aut!</p>
	     <div style="width: 100px; height: 100px;background: #000;"></div>
		 <span>文本</span>
		 <br >
		 <input type="button" value="按钮2">
         <input type="text"  >
		 
		<script>
			/* javaScript：基础语法+DOM（页面）+BOM（浏览器）
			   JQuery操作DOM方式【7方式 36函数】---改变页面效果 
			   1.元素内容操作：操作元素和元素内容的方式【3个函数】
			     .html()  .val()  .text()
			   2.元素属性操作【4个函数】 操作元素的属性【固定属性 附和属性】
			     .attr()  .removeattr()  .prop()  .removeProp()
			√   3.元素类名操作  【4个函数】
			   addClass()   removeClass()  toggleClass() hasClass()
			   4.元素样式【位置】操作【5个函数】
			     .css()   
				 .weight()  .height()   
				 .outerweight()  .outerheight()
			√   5.元素删除和插入操作 【7个函数】
			   append() prepend()  
			   after()  before()  
			   remove()   empty()    
			   replaceWith()
			√   6.元素遍历操作  【6个函数】
			   children()和 parent()
			   siblings()
			   next()和 prev()
			   each()
			   7.动画操作 【7个函数】
			   show()和hide()
			   slidedown()和slideup()
			   fadeIn和fadeout()
			   hover()
			   */
			
			/* 练习：1.100*100框  div 鼠标移动上去   文本改成超文本
			        2.按钮和输入框，点击按钮，输入框输出文字效果
					*/
        $('div').mouseenter(function(){
			$('span').html("<a herf='#'>超文本</a>");				   
						   });
		$('input[type="button"]').click(function(){
			$('input[type="text"]').val('文本框输出效果');
		});	
			
			
			/* JQurey操作DOM  通过点击一个元素绑定一个事件给另一个元素改变效果 
			   .html()函数    增加一个元素  覆盖原来的html
			   val()函数    input元素使用，改变表单元素中文本
			*/
		    // $('button').click(function(){
		    // DOM操作----改变页面上的其他元素
			// DOM操作----改变p元素改成marquee元素
			//  $('p').html("<marquee>跑马等...</marquee>")
		    // });
		  
		</script>
	</body>
</html>